<template>
	<view class="merchant">
		<view class="merchant-seach">
			<u-search placeholder="请输入商户编号/商户名称" v-model="queryParams.merchNo" bg-color="#FFFFFF"
				:action-style="{color: '#4286F5'}" @custom="search"></u-search>
		</view>
		<view class="merchant-contain">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="content">
					商户名称：<text>{{item.merchName}}</text>
				</view>
				<view class="content">
					商户编号：<text>{{item.merchNo}}</text>
					<i  class="iconfont icon-niantie" @click="copy(item.merchNo)"></i>
				</view>
				<!-- <view class="content">
					机具sn号：<text>{{item.sn}}</text>
				</view> -->
				<view class="time">
					<view class="left">
						{{item.applyDate}}
					</view>
					<view class="right button" @click="change(item.merchNo)">
						变更
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadMore"></uni-load-more>
	</view>
</template>

<script>
	import {
		merchRepairList,
	} from "@/api/merchantSupplement/index";
	import loadMoreData from "@/mixins/loadmore";
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				list: [
					// {
					// 	merchName: '商户名嘿嘿',
					// 	merchNo: '1234567',
					// 	sn: '7847389hsja99',
					// 	time: '2024-09-23'
					// },
					// {
					// 	merchName: '商户名嘿嘿23',
					// 	merchNo: '1234567',
					// 	sn: '7847389hsja99',
					// 	time: '2024-09-23'
					// },
				],
				queryParams: {
					merchNo: null
				},
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams,
				};
				this.loadMoreStatusDeal([]);
				merchRepairList(params).then(res => {
					this.total = res.total;
					let list = res.data;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				})
			},
			reachBottomCallBack() {
				this.getList();
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
				});
			},
			// 搜索
			search(e) {
				console.log({
					e
				})
				this.queryParams.merchNo = e;
				this.init();
				this.getList();
			},
			change(merchNo) {
				this.$nav.push({
					path: '/pages/home/merchantSupplement/changeInfo',
					query: {
						merchNo
					},
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$tip.toast("复制成功!");
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.merchant {
		margin: R(30);

		&-seach {}

		&-contain {
			// background-color: #FFFFFF;
			// border-radius: R(10);
			// padding: R(20) R(30);
			// margin-top: R(30);

			.title {
				display: flex;
				justify-content: space-between;
				color: #737373;

				.total {
					color: #4286F5;
				}
			}

			.item {
				background-color: #FFFFFF;
				border-radius: R(10);
				padding: R(20) R(30);
				// border-bottom: 1px solid #EEEEEE;
				margin: R(30) 0;


				.content {
					margin-bottom: R(20px);
				}

				.time {
					border-top: 1px solid #EEEEEE;
					color: #666666;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: R(30);
					padding-top: R(20px);

					.left {
						display: flex;
						flex-direction: column;

						text {
							margin: R(10) 0;
						}
					}

				}

				&:last-child {
					border-bottom: 0;
				}
			}
		}

		.button {
			padding: R(10px) R(30px);
			border: #4286F5 1px solid;
			border-radius: R(10px);
			color: #4286F5;
		}
	}
</style>